<template>
  <div ref="echart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    isAxisChart: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      axisOptions: {},
      normalOptions: {
        tooltip: {
          trigger: "item",
        },
        series: [],
      },
      echart: null,
    };
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOptions : this.normalOptions;
    },
  },
  watch: {
    chartData: {
      handler: function () {
        this.initEchart();
      },
      deep: true,
    },
  },
  methods: {
    initEchart() {
      this.initEchartData();
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    initEchartData() {
      if (this.isAxisChart) {
        this.axisOptions = this.chartData;
      } else {
        this.normalOptions = this.chartData;
      }
    },
  },
};
</script>

<style></style>
